<script lang="ts">
export default {
  name: 'orderDetail',
};
</script>
<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import { getOrderDetail } from '@/api/oms/order';
import { useRoute } from 'vue-router';
import {  ElMessageBox } from 'element-plus';
import LogisticsDialog from './components/logisticsDialog.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import {
  Order,
  OrderSourceStatus,
  OrderSourceMap,
  PayTypeStatus,
  PayTypeMap,
  OrderStatus,
  OrderStatusMap,
  OrderItem,
  MemberRegister,
} from '@/api/oms/order/types';
const defaultReceiverInfo = {
  orderId: null,
  receiverName: null,
  receiverPhone: null,
  receiverPostCode: null,
  receiverDetailAddress: null,
  receiverProvince: null,
  receiverCity: null,
  receiverRegion: null,
  status: null,
};

const router = useRoute();

const orderSourceMap: OrderSourceMap = {
  1: '微信小程序',
  2: 'APP',
  3: 'PC',
};

const payTypeMap: PayTypeMap = {
  1: '支付宝',
  2: '微信',
  3: '会员余额',
};

const orderStatusMap: OrderStatusMap = {
  0: '待付款',
  1: '待发货',
  2: '已发货',
  3: '已完成',
  4: '已取消',
  5: '售后中',
};

const state = reactive({
  id: null as any,
  order: {} as Order,
  receiverDialogVisible: false,
  receiverInfo: Object.assign({}, defaultReceiverInfo),
  moneyDialogVisible: false,
  moneyInfo: {
    orderId: null,
    freightAmount: 0,
    discountAmount: 0,
    status: null,
  },
  messageDialogVisible: false,
  message: { title: null, content: null },
  closeDialogVisible: false,
  closeInfo: { note: null, id: null },
  markOrderDialogVisible: false,
  markInfo: { note: null },
  logisticsDialogVisible: false,
  orderItems:[] as OrderItem[],
  member:{} as MemberRegister,
});

const {
  id,
  order,
  receiverDialogVisible,
  receiverInfo,
  moneyDialogVisible,
  moneyInfo,
  messageDialogVisible,
  message,
  closeDialogVisible,
  closeInfo,
  markOrderDialogVisible,
  markInfo,
  logisticsDialogVisible,
  orderItems,
  member,
} = toRefs(state);

onMounted(() => {
  state.id = router.query.id;
  console.log(state.id);
  getOrderDetail(state.id).then((response: any) => {
    state.order = response.data.order;
    state.orderItems = response.data.orderItems;
    state.member = response.data.member;
    console.log(state.order);
  });
}),
  function formatNull(value: any) {
    if (value === undefined || value === null || value === '') {
      return '暂无';
    } else {
      return value;
    }
  };
function formatLongText(value: any) {
  if (value === undefined || value === null || value === '') {
    return '暂无';
  } else if (value.length > 8) {
    return value.substr(0, 8) + '...';
  } else {
    return value;
  }
}
function payTypeFilter(payTypeStatus: PayTypeStatus) {
  return payTypeMap[payTypeStatus];
}
function sourceTypeFilter(sourceType: OrderSourceStatus) {
  return orderSourceMap[sourceType];
}

function formatAddress(order: any) {
  let str = order.receiverProvince;
  if (order.receiverCity != null) {
    str += '  ' + order.receiverCity;
  }
  str += '  ' + order.receiverRegion;
  str += '  ' + order.receiverDetailAddress;
  return str;
}

function orderStatusFilter(status:OrderStatus) {
  return orderStatusMap[status];
}
function formatPayStatus(value: any) {
  if (value === 0) {
    return '未支付';
  } else if (value === 4) {
    return '已退款';
  } else {
    return '已支付';
  }
}
function formatDeliverStatus(value: any) {
  if (value === 0 || value === 1) {
    return '未发货';
  } else {
    return '已发货';
  }
}

function formatProductAttr(value: any) {
  if (value == null) {
    return '';
  } else {
    let attr = JSON.parse(value);
    let result = '';
    for (let i = 0; i < attr.length; i++) {
      result += attr[i].key;
      result += ':';
      result += attr[i].value;
      result += ';';
    }
    return result;
  }
}

function onSelectRegion(data: any) {
  state.receiverInfo.receiverProvince = data.province.value;
  state.receiverInfo.receiverCity = data.city.value;
  state.receiverInfo.receiverRegion = data.area.value;
}

function formatTime(time: any) {
  if (time == null || time === '') {
    return '';
  }
  let date = new Date(time);
  //   return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}

function formatStepStatus() {
    console.log(state.order.status)
    let value = state.order.status
  if (value === 1) {
    //待发货
    return 2;
  } else if (value === 2) {
    //已发货
    return 3;
  } else if (value === 3) {
    //已完成
    return 4;
  } else {
    //待付款、已关闭、无限订单
    return 1;
  }
}

function showUpdateReceiverDialog() {
  state.receiverDialogVisible = true;
  //   state.receiverInfo={
  // orderId:state.order.id,
  // receiverName:state.order.receiverName,
  // receiverPhone:state.order.receiverPhone,
  // receiverPostCode:state.order.receiverPostCode,
  // receiverDetailAddress:state.order.receiverDetailAddress,
  // receiverProvince:state.order.receiverProvince,
  // receiverCity:state.order.receiverCity,
  // receiverRegion:state.order.receiverRegion,
  // status:state.order.status
  //   }
}

function handleUpdateReceiverInfo() {
  ElMessageBox.confirm('是否要修改收货信息?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // updateReceiverInfo(state.receiverInfo).then(response:any=>{
    //   state.receiverDialogVisible=false;
    //   ElMessage.success('修改成功');
    //   getOrderDetail(state.id).then(response => {
    //     state.order = response.data;
    //   });
    // });
  });
}

function showUpdateMoneyDialog() {
  state.moneyDialogVisible = true;
  //   state.moneyInfo.orderId=state.order.id;
  //   state.moneyInfo.freightAmount=state.order.freightAmount;
  //   state.moneyInfo.discountAmount=state.order.discountAmount;
  //   state.moneyInfo.status=state.order.status;
}

function handleUpdateMoneyInfo() {
  ElMessageBox.confirm('是否要修改费用信息?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // updateMoneyInfo(state.moneyInfo).then(response:any=>{
    //   state.moneyDialogVisible=false;
    //   ElMessage.success('修改成功');
    //   getOrderDetail(state.id).then(response => {
    //     state.order = response.data;
    //   });
    // });
  });
}

function showMessageDialog() {
  state.messageDialogVisible = true;
  state.message.title = null;
  state.message.content = null;
}



function showCloseOrderDialog() {
  state.closeDialogVisible = true;
  state.closeInfo.note = null;
  state.closeInfo.id = state.id;
}

function handleCloseOrder() {
  ElMessageBox.confirm('是否要关闭?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    let params = new URLSearchParams();
    //   params.append("ids",[state.closeInfo.id]);
    //   params.append("note",state.closeInfo.note);
    //   closeOrder(params).then(response=>{
    //     state.closeDialogVisible=false;
    //     ElMessage.success('订单关闭成功');
    //     getOrderDetail(state.id).then(response => {
    //       state.order = response.data;
    //     });
    //   });
  });
}

function showMarkOrderDialog() {
  state.markOrderDialogVisible = true;
  //   state.markInfo.id=state.id;
  //   state.closeOrder.note=null;
}
function handleMarkOrder() {
  ElMessageBox.confirm('是否要备注订单?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    let params = new URLSearchParams();
    // params.append("id",state.markInfo.id);
    // params.append("note",state.markInfo.note);
    // params.append("status",state.order.status);
    // updateOrderNote(params).then(response=>{
    //   state.markOrderDialogVisible=false;
    //   ElMessage.success('订单备注成功');
    //   getOrderDetail(state.id).then(response => {
    //     state.order = response.data;
    //   });
    // });
  });
}
function handleDeleteOrder() {
  ElMessageBox.confirm('是否要进行该删除操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    let params = new URLSearchParams();
    // params.append("ids",[state.id]);
    // deleteOrder(params).then(response=>{
    //     ElMessage.message({
    //     message: '删除成功！',
    //     type: 'success',
    //     duration: 1000
    //   });
    //   this.$router.back();
    // });
  });
}
function showLogisticsDialog() {
  state.logisticsDialogVisible = true;
}
</script>

<template>

  <div class="detail-container">
    <div>
      <el-steps
        :active="formatStepStatus()"
        finish-status="success"
        align-center
      >
        <el-step
          title="提交订单"
          :description="formatTime(order.createTime)"
        ></el-step>
        <el-step
          title="支付订单"
          :description="formatTime(order.payTime)"
        ></el-step>
        <el-step
          title="平台发货"
          :description="formatTime(order.deliveryTime)"
        ></el-step>
        <el-step
          title="确认收货"
          :description="formatTime(order.receiveTime)"
        ></el-step>
        <el-step
          title="完成评价"
          :description="formatTime(order.commentTime)"
        ></el-step>
      </el-steps>
    </div>
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger"
          >当前订单状态：{{ orderStatusFilter(order.status) }}</span
        >
        <div class="operate-button-container" v-show="order.status === 0">
          <el-button size="small" @click="showUpdateReceiverDialog"
            >修改收货人信息</el-button
          >
          <el-button size="small" @click="showUpdateMoneyDialog"
            >修改费用信息</el-button
          >
          <el-button size="small" @click="showCloseOrderDialog"
            >关闭订单</el-button
          >
          <el-button size="small" @click="showMarkOrderDialog"
            >备注订单</el-button
          >
        </div>
        <div class="operate-button-container" v-show="order.status === 1">
          <el-button size="small" @click="showUpdateReceiverDialog"
            >修改收货人信息</el-button
          >
          <el-button size="small">取消订单</el-button>
          <el-button size="small" @click="showMarkOrderDialog"
            >备注订单</el-button
          >
        </div>
        <div
          class="operate-button-container"
          v-show="order.status === 2 || order.status === 3"
        >
          <el-button size="small" @click="showLogisticsDialog"
            >订单跟踪</el-button
          >
          <el-button size="small" @click="showMarkOrderDialog"
            >备注订单</el-button
          >
        </div>
        <div class="operate-button-container" v-show="order.status === 4">
          <el-button size="small" @click="handleDeleteOrder"
            >删除订单</el-button
          >
          <el-button size="small" @click="showMarkOrderDialog"
            >备注订单</el-button
          >
        </div>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">订单编号</el-col>
          <el-col :span="4" class="table-cell-title">订单来源</el-col>
          <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
          <el-col :span="4" class="table-cell-title">支付方式</el-col>
    
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ order.orderSn }}</el-col>
          <el-col :span="4" class="table-cell">{{
             sourceTypeFilter(order.sourceType)
          }}</el-col>
          <el-col :span="4" class="table-cell">暂无</el-col>
          <el-col :span="4" class="table-cell">{{
           payTypeFilter(order.payType)
          }}</el-col>
      
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell-title">配送方式</el-col>
          <el-col :span="4" class="table-cell-title">物流单号</el-col>
          <el-col :span="4" class="table-cell-title">自动确认收货时间</el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="4" class="table-cell">{{
            order.deliveryCompany
          }}</el-col>
          <el-col :span="4" class="table-cell">{{ order.deliverySn }}</el-col>
          <el-col :span="4" class="table-cell"
            >{{ order.autoConfirmDay }}天</el-col
          > -->
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">收货人</el-col>
          <el-col :span="6" class="table-cell-title">手机号码</el-col>
          <el-col :span="6" class="table-cell-title">邮政编码</el-col>
          <el-col :span="6" class="table-cell-title">收货地址</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{ order.receiverName }}</el-col>
          <el-col :span="6" class="table-cell">{{
            order.receiverPhone
          }}</el-col>
          <el-col :span="6" class="table-cell">{{
            order.receiverPostCode
          }}</el-col>
          <el-col :span="6" class="table-cell">{{ order }}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">商品信息</span>
      </div>
      <el-table
        ref="orderItemTable"
        :data="order.orderItemList"
        style="width: 100%; margin-top: 20px"
        border
      >
        <el-table-column label="商品图片" width="120" align="center">
          <template #default="scope">
            <img :src="scope.row.productPic" style="height: 80px" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template #default="scope">
            <p>{{ scope.row.productName }}</p>
            <p>品牌：{{ scope.row.productBrand }}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" width="120" align="center">
          <template #default="scope">
            <p>价格：￥{{ scope.row.productPrice }}</p>
            <p>货号：{{ scope.row.productSn }}</p>
          </template>
        </el-table-column>
        <el-table-column label="属性" width="120" align="center">
          <template #default="">
            {{  }}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="120" align="center">
          <template #default="scope">
            {{ scope.row.productQuantity }}
          </template>
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template #default="scope">
            ￥{{ scope.row.productPrice * scope.row.productQuantity }}
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right; margin: 20px">
        合计：<span class="color-danger">￥{{ order.totalAmount }}</span>
      </div>
      <div style="margin-top: 60px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">费用信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">商品合计</el-col>
          <el-col :span="6" class="table-cell-title">运费</el-col>
          <el-col :span="6" class="table-cell-title">优惠券</el-col>
          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell"
            >￥{{ order.totalAmount }}</el-col
          >
          <el-col :span="6" class="table-cell"
            >￥{{ order.freightAmount }}</el-col
          >
          <el-col :span="6" class="table-cell"
            >-￥{{ order.couponAmount }}</el-col
          >
          <el-col :span="6" class="table-cell"
            >-￥{{ order.integrationAmount }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell"
            >-￥{{ order.promotionAmount }}</el-col
          >
          <el-col :span="6" class="table-cell"
            >-￥{{ order.discountAmount }}</el-col
          >
          <el-col :span="6" class="table-cell">
            <span class="color-danger"
              >￥{{ order.totalAmount + order.freightAmount }}</span
            >
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger"
              >￥{{
                order.payAmount + order.freightAmount - order.discountAmount
              }}</span
            >
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">操作信息</span>
      </div>
      <el-table
        style="margin-top: 20px; width: 100%"
        ref="orderHistoryTable"
        :data="order.historyList"
        border
      >
        <el-table-column label="操作者" width="120" align="center">
          <template #default="scope">
            {{ scope.row.operateMan }}
          </template>
        </el-table-column>
        <el-table-column label="操作时间" width="160" align="center">
          <template #default="scope">
            {{ formatTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="120" align="center">
          <template #default="">
            {{  }}
          </template>
        </el-table-column>
        <el-table-column label="付款状态" width="120" align="center">
          <template #default="">
            {{  }}
          </template>
        </el-table-column>
        <el-table-column label="发货状态" width="120" align="center">
          <template #default="">
            {{  }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template #default="scope">
            {{ scope.row.note }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      title="修改收货人信息"
      v-model:visible="receiverDialogVisible"
      width="40%"
    >
      <el-form :model="receiverInfo" ref="receiverInfoForm" label-width="150px">
        <el-form-item label="收货人姓名：">
          <el-input
            v-model="receiverInfo.receiverName"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
          </el-input>
        </el-form-item>
        <el-form-item label="邮政编码：">
          <el-input
            v-model="receiverInfo.receiverPostCode"
            style="width: 200px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="所在区域：">
          <!-- <v-distpicker :province="receiverInfo.receiverProvince"
                          :city="receiverInfo.receiverCity"
                          :area="receiverInfo.receiverRegion"
                          @selected="onSelectRegion"></v-distpicker> -->
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input
            v-model="receiverInfo.receiverDetailAddress"
            type="textarea"
            rows="3"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span  class="dialog-footer">
        <el-button @click="receiverDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateReceiverInfo"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="修改费用信息"
      v-model:visible="moneyDialogVisible"
      width="40%"
    >
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">商品合计</el-col>
          <el-col :span="6" class="table-cell-title">运费</el-col>
          <el-col :span="6" class="table-cell-title">优惠券</el-col>
          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell"
            >￥{{ order.totalAmount }}</el-col
          >
          <el-col :span="6" class="table-cell">
            <el-input v-model.number="moneyInfo.freightAmount" size="small"
              ><template v-slot:prepend>￥</template></el-input
            >
          </el-col>
          <el-col :span="6" class="table-cell"
            >-￥{{ order.couponAmount }}</el-col
          >
          <el-col :span="6" class="table-cell"
            >-￥{{ order.integrationAmount }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell"
            >-￥{{ order.promotionAmount }}</el-col
          >
          <el-col :span="6" class="table-cell">
            <el-input v-model.number="moneyInfo.discountAmount" size="small"
              ><template v-slot:prepend>-￥</template></el-input
            >
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger"
              >￥{{ order.totalAmount + moneyInfo.freightAmount }}</span
            >
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger"
              >￥{{
                order.payAmount +
                moneyInfo.freightAmount -
                moneyInfo.discountAmount
              }}</span
            >
          </el-col>
        </el-row>
      </div>
      <span class="dialog-footer">
        <el-button @click="moneyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateMoneyInfo"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  
    <el-dialog title="关闭订单" v-model:visible="closeDialogVisible" width="40%">
      <el-form :model="closeInfo" label-width="150px">
        <el-form-item label="操作备注：">
          <el-input v-model="closeInfo.note" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="closeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="备注订单"
      v-model:visible="markOrderDialogVisible"
      width="40%"
    >
      <el-form :model="markInfo" label-width="150px">
        <el-form-item label="操作备注：">
          <el-input v-model="markInfo.note" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span  class="dialog-footer">
        <el-button @click="markOrderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
      </span>
    </el-dialog>
    <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
  </div>
</template>

<style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
